<div class="modal-header">
  <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
  <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
  </button>
</div>
<div class="modal-body">
  @if (messageBold) {
    <p><b>{{messageBold}}</b></p>
  }
  @if (message) {
    <p class="mb-0" [innerHTML]="message | safeHtml"></p>
  }
</div>
<div class="modal-footer">
  <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
        <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
      </button>
  <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
    <span>
      {{btnCaption}}
      <span class="visually-hidden">{{ seconds | number: '1.0-0' }} seconds</span>
    </span>
    @if (!confirmButtonEnabled) {
      <ngb-progressbar style="height: 1px;" type="dark" [max]="secondsTotal" [value]="seconds"></ngb-progressbar>
    }
  </button>
  @if (alternativeBtnCaption) {
    <button type="button" class="btn" [class]="alternativeBtnClass" (click)="alternative()" [disabled]="!alternativeButtonEnabled || !buttonsEnabled">
      {{alternativeBtnCaption}}
    </button>
  }
</div>
